
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>油站上线申请</title>
  <meta http-equiv="Content-type" content="textml; charset=utf-8"/>
  <meta content="telephone=no" name="format-detection"/>
  <meta name="x5-orientation" content="portrait">
  <meta name="screen-orientation" content="portrait">
  <meta name="viewport"
        content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=yes">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="//img.ejiayou.com/activity/images/groupon/ejyCommonCss.css">
  <link rel="stylesheet" type="text/css" href="//img.ejiayou.com/activity/pages/platform/grap_ticket/css/reset.css"/>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
  <link rel="stylesheet" type="text/css" href="css/app_station_detail.css"/>
  <style type="text/css">
    html {
      width: 100%;
      overflow-x: hidden;
    }

    #codeNum {
      position: absolute;
      top: -100%;
      /* font-size: 0; */
    }
    .printer-btn-warp{
      display: flex;
      justify-content: space-between;
      margin: 0.62rem 0.5rem 0 0.5rem;
    }
    .printer-cancel-btn{
      width: 5.18rem;
      height: 1.56rem;
      font-size: 18px;
      font-weight: 600;
      color: #666666;
      background: #FFFFFF;
      border-radius: 0.18rem;
      border: 1px solid #E9E9E9;
    }
    .printer-submit-btn{
      width: 5.18rem;
      height: 1.56rem;
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(318deg, #FF9100 0%, #FFA400 100%);
      border-radius: 0.18rem;;
    }
    .printer-popup{
      background: #fff;
      padding: 0.65rem 0;
      font-weight: 600;
    }
    .printer-popup-title{
      font-size: 0.56rem;
      font-weight: 600;
      color: #333333;
      text-align: center;
      margin-bottom: 0.37rem;
    }
    .img-icon{
      width: 0.53rem;
      height: 0.53rem;
    }
  </style>
  <script type="text/javascript">
    eval(function (p, a, c, k, e, r) {
      e = function (c) {
        return c.toString(a)
      }
      if (!''.replace(/^/, String)) {
        while (c--) r[e(c)] = k[c] || e(c)
        k = [function (e) {
          return r[e]
        }]
        e = function () {
          return '\\w+'
        }
        c = 1
      }

      while (c--)
        if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c])
      return p
    }('(6(a,d){j b=a.i,e="3"f 5?"3":"9",c=6(){b.7.8=(2>b.4?b.4:2)/2*g+"h"};a.0&&(d.0(e,c,!1),a.0("k",c,!1))})(l,5);', 22, 22, 'addEventListener||750|orientationchange|clientWidth|window|function|style|fontSize|resize||||||in|64|px|documentElement|var|DOMContentLoaded|document'.split('|'), 0, {}))
  </script>
</head>
<body>
<div id="app" v-clock>
  <input id="codeNum" readonly="readonly" value="">
  <div class="load_end" v-if="!loadEnd"></div>
  <div class="header">
    <div class="header_item">
      <div class="header_item_fl">工单名称：</div>
      <div class="header_item_rg">{{work_order.title}}</div>
    </div>
    <div class="header_item">
      <div class="header_item_fl">工单号：</div>
      <div class="header_item_rg">{{work_order.id}}</div>
    </div>
    <div class="header_state">
					<span class="header_state_1" v-if="work_order.handle_state == 1">
						流转中
					</span>
      <span class="header_state_2" v-if="work_order.handle_state == 0">
						待提交
					</span>
      <span class="header_state_3" v-if="work_order.handle_state != 0 && work_order.handle_state!=1">
						已结束
					</span>
    </div>
  </div>
  <div class="main">
    <van-field readonly clickable :value="work_order_content.stationName" input-align="right" label="油站名"
               class='main_info' readonly></van-field>
    <van-field readonly clickable label="上线时间" :value="work_order_content.onLineTime" input-align="right"
               class='main_info'></van-field>
    <div class="note_panel" v-if="work_order_content.remark">
      <div class="note_panel_title">
        备注：
      </div>
      <div class="note_panel_content">
        <p v-for="(remark_item, remark_index) in work_order_content.remark">
          {{remark_index + 1}}.{{remark_item}}
        </p>
      </div>
    </div>
    <div class="look" v-if="work_order.handle_state == 0"></div>
    <div class="look" @click="lookStationMsg" v-if="work_order.handle_state!= 0">查看油站信息 <img src="img/icon_go.png">
    </div>
    <div class="" style="min-height: 5.2rem;">
      <div class="workflow" v-if="workflows.length>0">
        <div class="workflow_title">审批工作流</div>
        <div class="workflow_item" v-for="(item,index) in workflows">
          <div class="workflow_item_fl_fl">
            <div class='yuan'></div>
            <div class='line' v-if="index+1!=workflows.length"></div>
          </div>
          <div class="workflow_item_con">
            <div class="workflow_item_content">
              <div class="workflow_item_fl">

                <div class="workflow_item_fl_rg">
                  <div class="submit">
                    <div class="submit_top">
                      <div class="submit_title">{{item.node_name}}</div>
                      <div class="isfinish" v-if="work_order.handle_state != 4&&item.order_node_state == 1">

                        <span>已处理</span>

                      </div>
                      <div class="isfinish iserror"
                           v-if="work_order.handle_state == 4&&item.order_node_state == 1&&index==0">

                        <span class="header_state_3">已撤销</span>

                      </div>
                      <div class="isfinish iserror" v-if="item.order_node_state == 2">

                        <span class="header_state_3">已驳回</span>

                      </div>
                      <div class="issubmit" v-if="work_order.handle_state != 4&&item.order_node_state == 0">

                        <span v-if="index==0">未提交</span>
                        <span v-if="index!=0">待审核</span>

                      </div>
                    </div>
                    <div class="submit_bottom" ><span>{{item.user_name}}</span></div>
                   
                  </div>

                </div>
              </div>
              <div class="workflow_item_rg">
                <div class="submit_time" v-if="item.update_time">
                  {{item.update_time}}
                </div>
              </div>
            </div>
            <div class="comments" v-if="item.remark">审批意见：{{item.remark}}</div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="" v-if="work_order.handle_state == 0 ">
    <div class="next" v-if="is_create==1" @click="comeToWrite">填写申请</div>
  </div>
  <div v-if="work_order.handle_state ==1">
    <div class="next" v-if="is_create==0 && is_operator==1 && role_id!=4" @click="comeToApproval">审批</div>
    <div class="next" v-if="is_create==0 && is_operator==1&&role_id==4 && workflows[workflows.length-1].work_order_node_id == 5" @click="comeToApproval">配置完成</div>
    <!--<div class="next" v-if="is_create==1 && is_operator==1" @click="showPrinter = true">确认油站上线</div>-->
    <div class="next" id="copy_link_d" v-if="role_id==6 && is_create==1" @click="copyLink">复制链接</div>
    <div class="next" v-if="workflows[workflows.length-1].work_order_node_id == 8"  @click="showPrinter = true">上线培训</div>
	  <div class="next" v-if="workflows[workflows.length-1].work_order_node_id == 41" @click="trainFinish">培训完成</div>
    <div class="revoke" v-if="is_create==1" @click="undoApproval">撤销</div>
		
    <div class="revoke" @click="rebackUrl" v-if="is_create==0 && is_operator==0">返回</div>

  </div>

  <!-- <div class="" v-if="work_order.handle_state == 3">

    <div class="revoke" style="background: #ccc; color: #fff">已驳回</div>
  </div> -->
  <div class="" v-if="is_create==1&&(work_order.handle_state == 4 || work_order.handle_state == 3)"
       @click="comeToReplace">

    <div class="next" style="">修改</div>
  </div>
  <div class="revoke" @click="rebackUrl" v-if="work_order.handle_state != 0 && work_order.handle_state!=1">返回</div>
  <van-popup v-model="showPopUp">
    <div class="submit_box">
      <div class="submit_title">确认撤销</div>
      <div class="submit_button">
        <div class="button_one" @click="showPopUp=false"><span>取消</span></div>
        <div class="button_two" @click="submitRevoke"><span>确认</span></div>
      </div>
    </div>
  </van-popup>
  <van-popup v-model="showPrinter" round position="bottom" class="printer-popup">
    <p class="printer-popup-title">配置小票机</p>
      <van-field name="radio" label="打印机">
        <template #input>
          <van-radio-group v-model="isPrinter" direction="horizontal">
            <van-radio name="1">需要
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
              </template>
            </van-radio>
            <van-radio name="0">不需要
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
              </template>
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field v-if="isPrinter === '1'" v-model="printerParams.printCode" label="小票机编号" placeholder=" 输入打印机编号" :error-message="printerCodeErrorMessage"></van-field>
    <div class="printer-btn-warp">
      <button class="printer-cancel-btn" @click="showPrinter = false">取消</button>
      <button class="printer-submit-btn" @click="printerSubmit">确认</button>
    </div>
  </van-popup>
</div>
<script src="https://img.ejiayou.com/activity/pages/freeOrders/js/vue.js"></script>
<script src="https://img.ejiayou.com/activity/pages/freeOrders/js/jquery-1.9.1.min.js"></script>
<!--	<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.11/lib/vant.min.js"></script>
<script src="//img.ejiayou.com/activity/images/groupon/common.js"></script>
<script type="text/javascript" src="//img.ejiayou.com/activity/images/pay_lottery/clipboard.min.js"></script>
<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
  var clipboard
  var admin_id = getQueryVariable('admin_id') || ''
  var work_order_id = getQueryVariable('work_order_id') || ''
  var vm = new Vue({
    el: '#app',
    data: {
	  activityHost: (window.location.origin.indexOf("dev.ejiayou.com") != -1 ? window.location.origin : "//finance.ejiayou.com"),
      loadEnd: false,
      stationName: '油站名字',
      programme: '方案1',//方案
      subsidyTime: '2020-01-01 00:00:00',//补贴时间
      subsidyDay: '35天',//补贴天数
      show: false,
      stationValue: '',
      message: '设置 type 为 range 后可以选择日期区间，此时 confirm 事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。',
      overlayShow: false,
      mytext: '',
      workflows: [],
      admin_id: admin_id,
      work_order_id: work_order_id,
      work_order: '',
      work_order_content: '',
      is_create: 0,
      is_operator: 0,
      role_id: 0,
      showPopUp: false,
      isPrinter: '1',
      printerParams: {
        printCode: ''
      },
      showPrinter: false,
      activeIcon: 'https://img.ejiayou.com/activity/jiguang_upload/img/active_icon.png',
      inactiveIcon: 'https://img.ejiayou.com/activity/jiguang_upload/img/inactive_icon.png',
      printerCodeErrorMessage: ''
    },
    created: function () {
      var that = this
      // var vConsole = new VConsole()

    },
    mounted: function () {
      this.getFormData()
    },
    // 监听输入框值变化
    methods: {
      printerSubmit() {
        if (this.isPrinter === '1') {
          if (!this.printerParams.printCode) {
            this.printerCodeErrorMessage = '请输入打印机编号'
            return
          } else {
            this.printerCodeErrorMessage = ''
          }
          this.bindPrinter().then(() => {
            this.sureOnline()
          })
        } else {
          this.bindPrinter().then(() => {
            this.sureOnline()
          })
        }
      },
      bindPrinter() {
        vant.Toast.loading({ message: '配置小票机中...', forbidClick: true, duration: 0 });
        
		    return new Promise((resolve, reject) => {
          $.ajax({
            url: this.activityHost + '/cwxt/onlineStation/addPrintCode?printCode=' + this.printerParams.printCode + "&work_order_id=" + this.work_order_id + "&needPrinter=" + this.isPrinter,
            type: 'post',
            contentType: 'application/json; charset=utf-8',
            success: (res) => {
              vant.Toast.clear()
              if (res.code === 0) {
              	vant.Toast('上线成功');
                this.showPrinter = false
                resolve()
              } else {
//              vant.Toast('小票机绑定失败，请重试');
                vant.Toast('上线失败');
              }
            },
            error: (err) => {
              reject()
              vant.Toast.clear()
//            vant.Toast('小票机绑定失败，请重试');
              vant.Toast('上线失败');
            }
          })
        })
      },
      trainFinish:function(){//培训完成
      	var that = this
      	vant.Toast.loading({ message: '', forbidClick: true, duration: 0 });
      	return new Promise((resolve, reject) => {
          $.ajax({
            url: '/eapi/v1/activity/work/exchange_node',
            type: 'POST',
            data:{
		        	admin_id:that.admin_id,
		        	work_order_id:that.work_order_id,
		        	audit:1
		        },
            success: (res) => {
              vant.Toast.clear()
              if(res.status == 200){
              	that.getFormData()
                resolve()
              }
            },
            error: (err) => {
              reject()
              vant.Toast.clear()
            }
          })
        })
      },
      getFormData: function (fn) {
        var self = this
        var data = {
          user_id: this.admin_id || '',
          work_order_id: this.work_order_id

        }
        $.ajax({
          url: '/eapi/v1/activity/work/approval_flow?t=' + new Date().getTime(),
          data: data,
          type: 'post',
          dataType: 'json',
          success: function (res) {
            console.log(res)
            if (res.status == 200) {
              var resData = res.data
              self.work_order = resData.work_order
              self.work_order_content = JSON.parse(resData.work_order.content)
              self.is_create = resData.is_create
              self.role_id = resData.role_id
              self.is_operator = resData.is_operator
              self.workflows = resData.flow
              console.log('输出结果=======================================================')
              self.workflows.forEach((item,index)=>{
                if(item.admin_id==0&&(item.work_order_node_id==36||item.work_order_node_id==38)){
                    console.log('财务')
                }else{
                    console.log('item.user_name',item.user_name)
                }
              })
              console.log('输出结果=======================================================')
              self.loadEnd = true
              if (fn) {
                fn()
              }
            }
          }
        })

      },
      copyLink: function () {
        clipboard = new ClipboardJS('#copy_link_d')
        $('#codeNum').attr('value', location.origin + '/pages/aurora_project/base_station/login.html?work_order_id=' + this.work_order_id)
        this.fuzhis()
      },
      // 分享链接
      fuzhis: function () {
        let input = document.querySelector('#codeNum')
        textString = input.value
        console.log(textString)
        // ios必须先选中文字且不支持 input.select();
        this.selectText(input, 0, textString.length)

        if (document.execCommand('copy')) {
          document.execCommand('copy')
          this.textString = textString

          ejyToast.showToast(3, '复制成功')
        }

        clipboard.on('success', function (e) {
          this.textString = textString

          e.clearSelection()
        })
        clipboard.on('error', function (e) {

        })

      },
      selectText: function (textbox, startIndex, stopIndex) {
        if (textbox.createTextRange) { //ie
          const range = textbox.createTextRange()
          range.collapse(true)
          range.moveStart('character', startIndex) //起始光标
          range.moveEnd('character', stopIndex - startIndex) //结束光标
          range.select() //不兼容苹果
        } else { //firefox/chrome
          textbox.setSelectionRange(startIndex, stopIndex)
          textbox.focus()
        }
      },
      undoApproval: function () {
        this.showPopUp = true

      },
      submitRevoke: function () {
        this.submitApproval(3, function () {
          location.reload()
        })
      },
      comeToReplace: function () {
        location.href = 'index.html?admin_id=' + this.admin_id + '&work_order_id=' + this.work_order_id + '&replace=1'
      },
      rebackUrl: function () {
        history.back()
      },
      submitApproval: function (status, fn) {
        var self = this
        var data = {
          work_order_id: this.work_order_id,
          admin_id: this.admin_id,
          audit: status
        }
        $.ajax({
          url: '/eapi/v1/activity/work/exchange_node',
          data: data,

          type: 'post',
          dataType: 'json',
          success: (res) => {
            console.log(res)
            if (res.status == 200) {
              var resData = res.data
              if (fn) {
                fn()
              }
            }
          },
          error: function (err) {
            vant.Toast('上线失败')
          }
        })
      },
      sureOnline: function () {
        vant.Toast.loading({
          message: '上线中'
        })
        var self = this
        setTimeout(function () {
          self.submitApproval(1, () => {
            self.showPrinter = false
            vant.Toast('上线成功')
            self.getFormData()
          })
        })
      },
      lookStationMsg: function () {
        location.href = 'index.html?admin_id=' + this.admin_id + '&work_order_id=' + this.work_order_id + '&look_gd=1&look_gd_text=1'
      },
      comeToWrite: function () {
        location.href = 'index.html?admin_id=' + this.admin_id + '&work_order_id=' + this.work_order_id
      },
      comeToApproval: function () {
        var self = this
        if (this.role_id == 4 || this.role_id == 7) {
          self.submitApproval(1, function () {

            self.getFormData()
          })
        } else {
          location.href = 'index.html?admin_id=' + this.admin_id + '&work_order_id=' + this.work_order_id + '&look_gd=1'
        }

      }
    }
  })
</script>
</body>

</html>
